<template>
  <div class="contract-management">
    <el-card class="card" shadow="hover">
      <template #header>
        <h3 class="title">表单管理</h3>
      </template>

      <!-- 查询条件 -->
      <el-row :gutter="5" style="margin-bottom: 10px;">
        <!-- 使用弹性布局使按钮靠右 -->
        <el-col :span="18">
          <el-row :gutter="4"> <!-- 减小内部间距 -->
            <el-col :span="6">
              <el-form-item label="模块名称">
                <el-input v-model="searchForm.modelName" placeholder="模块名称" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户ID">
                <el-input v-model="searchForm.userId" placeholder="用户ID" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态">
                <el-select v-model="searchForm.status" placeholder="状态" style="width: 100%;">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="登记" value="登记"></el-option>
                  <el-option label="待审核" value="待审核"></el-option>
                  <el-option label="审核中" value="审核中"></el-option>
                  <el-option label="已退回" value="已退回"></el-option>
                  <el-option label="已通过" value="已通过"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="forms" style="width: 100%" border stripe @selection-change="handleSelectionChange">
        <!-- 复选框列 -->
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- 表头和列定义 -->
        <el-table-column prop="id" label="序号" width="70"></el-table-column>
        <el-table-column prop="formId" label="表单ID" width="120"></el-table-column>
        <el-table-column prop="modelName" label="模块名称" width="150"></el-table-column>
        <el-table-column prop="userId" label="用户ID" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="200" :resizable="false">
          <template #default="scope">
            <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="primary" @click="handleSubmit(scope.row)">提交</el-button>
            <el-button size="mini" type="warning" @click="handleReturn(scope.row)">撤回</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-row>
        <el-col :span="24" style="text-align: center; margin-top: 20px;">
          <el-pagination
              background
              layout="prev, pager, next"
              :current-page="param.pageNum"
              :page-size="param.pageSize"
              :total="total"
              @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
  <todo-dialog :dialogVisible="dialogVisible"  @close="handleClose"></todo-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

import TodoDialog from "./TodoDialog.vue";
const router = useRouter();
const dialogVisible = ref(false);
const forms = ref([]);
const param = ref({
  pageNum: 1,
  pageSize: 8
});
const handleClose = (visible) =>{
  //将对话框的显示状态设置为false
  dialogVisible.value = visible;
}
const total = ref(0); // 总记录数

// 存储选中的行
const selectedRows = ref([]);

// 查询条件
const searchForm = ref({
  modelName: '',
  userId: null,
  status: ''
});

// 获取所有表单数据
const getAll = () => {
  axios.post('/forms/getAll', param.value).then(resp => {
    forms.value = resp.data.records; // 假设返回的数据包含一个名为records的字段
    console.log( forms.value)
    total.value = resp.data.total; // 设置总记录数
  });
};

// 当选择项发生变化时触发
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// 搜索功能
const handleSearch = () => {
  param.value.pageNum = 1; // 搜索重置到第一页
  getAll();
};

// 处理当前页码变化
const handleCurrentChange = (val) => {
  param.value.pageNum = val;
  getAll();
};

// 操作函数...
const handleView = (row) => {
  dialogVisible.value= true
  console.log(row)

  router.push(`/${row.modelId}/${row.formId}`)
  console.log(router.params.formId);
};
const handleEdit = (row) => {};
const Form = ref({});

const handleReturn = (row) => {};
const handleDelete = (row) => {};

onMounted(() => {
  getAll(); // 页面加载时获取数据
});
</script>

<style scoped>
:root {
  --primary-color: #409eff;
  --text-color: #2c3e50;
  --bg-color: #fff;
  --border-color: #ebeef5;
}

.contract-management {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  margin-top: 60px;
}

.card {
  max-width: 100%;
  margin: auto;
  background-color: var(--bg-color);
  border-color: var(--border-color);
}

.title {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}

.el-table__row {
  transition: background-color 0.3s;
}

.el-table tr:nth-child(even) {
  background-color: #f9fafc;
}

.el-table tr:hover {
  background-color: #ecf5ff;
}

.el-button {
  margin-right: 5px;
  transition: all 0.3s;
}

.el-button:hover {
  transform: scale(1.05);
}
</style>